/**
 * @overview
 * An Ext.form.Checkbox which render an Ext.Slider.  The Checkbox value, rather than being set to "on"
 * will contain the Slider's value
 * @author Chris Scott
 */

 /**
  * RExt.form.SliderCheckbox
  * @author Chris Scott
  */
 RExt.form.SliderCheckbox = Ext.extend(Ext.form.Checkbox, {
    ctCls: 'r-form-slider-checkbox',

    slider : null,

    /**
     * @cfg {Object} sliderConfig.  @see Ext.Slider
     */
    sliderConfig : {},

    // private, default sliderConfig.  gets Ext.applied to incoming sliderConfig
    _sliderConfig : {
        width: 100,
        value: 0,
        increment: 1,
        minValue: 0,
        maxValue: 5,
        disabled: true,

        /**
         * @cfg {String} boxLabel
         * Slider's boxLabel, same as Ext.form.Checkbox
         */
        boxLabel : 'sliderConfig.boxLabel'
    },

    initComponent : function() {

        this.sliderConfig = Ext.applyIf(this.sliderConfig, this._sliderConfig);
        this.sliderConfig.value = this.value;
        this.sliderConfig.hidden = !this.checked;
        this.slider = new Ext.Slider(this.sliderConfig);

        /**
         * added this since a checked slider was being rendered but was not enabled
         * making it useless unless you unchecked/rechecked it
         * also made sure the form reported back the slider values in case save was pressed without a Change event
         * D. Lazar
         */
        if (this.checked) {
            this.slider.enable();
            this.on('render', function(p) {
                this.el.dom.value = this.slider.getValue();
                this.value = this.slider.getValue();
            },this);
        }

        // super
        RExt.form.SliderCheckbox.superclass.initComponent.call(this);

        // enable / disable the slider according the checked-value
        this.on('check', function(field, checked) {
            if (checked === true) {
                this.slider.show();
                this.slider.enable();
                this.el.dom.value = this.slider.getValue();
                this.value = this.slider.getValue();
            }
            else if (checked === false) {
                this.slider.disable();
                this.slider.hide();
            }
        },this);
    },
    
    // private
    onRender : function(ct, position){

        // super
        RExt.form.SliderCheckbox.superclass.onRender.call(this, ct, position);

        /**
         * @event change
         * @param {Ext.Slider} slider
         * @param {Number} value
         */
        this.slider.on('change', function(slider, value) {
            if(this.el && this.el.dom){
                this.el.dom.value = slider.getValue();
                this.value = slider.getValue();
            }
        },this);

        var sliderCt = ct.createChild({
            tag: 'div',
            cls: 'r-form-slider-check-wrap'
        });

        // render the Slider
        this.slider.render(sliderCt);

        // create Slider boxLabel.  disable for now.  difficult issues with show/hide
        /*
        this.sliderBoxLabel = sliderCt.createChild({
            tag: 'label',
            cls: 'x-form-cb-label r-form-slider-checkbox-cb-label',
            "for" : this.slider.el.id,
            html: this.sliderConfig.boxLabel
        });
        this.sliderBoxLabel.alignTo(sliderCt, 'l-r');
        */

        // make sure to kill Slider when this dies.
        this.on('destroy', function() { this.slider.destroy(); });

        // both the <div class="x-form-check-wrap" /> and <div class="r-form-check-wrap" /> will be float:left
        // @see rext.css
        ct.createChild({
            cls: 'x-clear',
            html: '&nbsp;'
        });
    }
 });

/**
 * @class Ext.ux.SliderTip
 * @extends Ext.Tip
 * Simple plugin for using an Ext.Tip with a slider to show the slider value
 * @TODO should be moved somewhere more general, Chris
 */
Ext.ux.SliderTip = Ext.extend(Ext.Tip, {
    minWidth: 10,
    offsets : [0, -10],
    init : function(slider){
        slider.on('dragstart', this.onSlide, this);
        slider.on('drag', this.onSlide, this);
        slider.on('dragend', this.hide, this);
        slider.on('destroy', this.destroy, this);
    },

    onSlide : function(slider){
        this.show();
        this.body.update(this.getText(slider));
        this.doAutoWidth();
        this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
    },

    getText : function(slider){
        return slider.getValue();
    }
});
